<template>
	<div class="dialog-footer">
		<div class="dialog-footer-inner">
			<div class="ope-bar-wrap">
				<!--图片列表-->
				<div class="rich-editor-toolbar">
					<span v-for="(item, index) in richImgList" :key="index" class="icon-wrap">
						<h-tooltip :content="item.content" placement="top">
							<svg-icon :iconClass="item.icon" class="icon"></svg-icon>
						</h-tooltip>
					</span>
				</div>
				<!--按钮列表-->
				<div v-if="showRightBtnBar" class="btn-bars">
					<h-button
						v-for="(item, index) in btnList" :key="index"
						type="ghost"
						class="btn">
						{{item.text}}
					</h-button>
				</div>
				<div v-else>
					<expand-button :item="expandItem" position="right"></expand-button>
				</div>
			</div>
			<div ref="editInput" v-html="inputHtml"  class="rich-editor-input" contenteditable="true" tabindex="1" @keydown="handleKeyDown"></div>
			<!-- <textarea
				class="rich-editor-input"
				placeholder="使用Enter发送消息，使用Ctrl+Enter换行"
				@keyup="handleKeyUp"></textarea> -->
			<div class="rich-editor-footer">
				<h-button type="primary" @click="postMessage">发送</h-button>
			</div>
		</div>
	</div>
</template>

<script>
import ExpandButton from '@/components/common/expand-button'
import { mapState, mapMutations, mapActions } from "vuex"
export default {
	name: 'DialogFooter',
	components: {
		ExpandButton
	},
	props: {
		showRightBtnBar: {
			type: Boolean,
			default: true
		}
	},
	data() {
		return {
			inputHtml: '', // 输入html内容
			// 按钮列表
			btnList: [
				{
					text: '历史消息'
				},
				{
					text: '邀请评价'
				},
				{
					text: '会话保持'
				},
				{
					text: '转接'
				},
				{
					text: '三方会话'
				}
			],
			// 图片列表
			richImgList: [
				{
					icon: 'font-size',
					content: '字体'
				},
				{
					icon: 'emote',
					content: '表情'
				},
				{
					icon: 'img',
					content: '图片'
				},
				{
					icon: 'screenshot',
					content: '截图'
				},
				{
					icon: 'business',
					content: '业务办理'
				},
				{
					icon: 'product-card',
					content: '产品卡片'
				},
				{
					icon: 'card',
					content: '名片'
				},
			]
		}
	},
	computed: {
		...mapState('lm-chat', ['currentSessionInfo', 'currentClientId', 'currentClientInfo', 'clientDialogInput']),
		expandItem() {
			return {
				svg: 'more',
				children: this.btnList
			}
		}
	},
	watch: {
		clientDialogInput: {
			handler(val) {
				this.inputHtml = val
			},
			immediate: true
		}
	},
	methods: {
		...mapMutations('lm-chat', ['setClientDialogInput']),
		...mapActions('lm-chat', ['postMsg']),
		handleKeyDown(event) {
			if (event.ctrlKey && event.key === 'Enter') {
				console.log('Ctrl + Enter键被按下');
				// event.target.innerHTML += '<div><br/></div>'; // 在文本末尾添加一个换行符
				// this.textareaRange(event.target)
			} else if (event.key === 'Enter') {
				console.log('Enter键被按下');
				event.preventDefault(); // 阻止默认行为，不执行换行操作
				this.postMessage()
			}
		},
		// 发送消息
		postMessage() {
			let inputValue = this.$refs.editInput.innerHTML
			this.setClientDialogInput('')
			this.postMsg({
				msg_side: "1",
				aicc_msg_type: "text",
				aicc_msg_content: {
					content: inputValue
				},
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.dialog-footer{
	height: 215px;
	padding: 20px 20px 16px;
	.dialog-footer-inner{
		height: 100%;
		display: flex;
		flex-direction: column;
		background: #F7F7F7;
		border-radius: 8px;
	}
	.ope-bar-wrap{
		display: flex;
		justify-content: space-between;
		padding: 16px 20px 0 0;
		.btn-bars{
			margin-bottom: 10px;
			.btn{
				margin-left: 10px;
				border-color: #EFEFEF;
				border-radius: 4px;
				padding: 4px 9px;
			}
			
		}
		/deep/ .entry-expand{
			right: -20px !important;
			bottom: 28px;
		}
		.rich-editor-toolbar{
			display: flex;
			.icon-wrap{
				margin: 4px 15px 20px;
				.icon{
					width: 16px;
					height: 16px;
					
				}
			}
		}
	}
	
	.rich-editor-input{
		flex:1;
		width: 100%;
    border: 0;
    outline: none;
		resize: none;
    overflow: hidden auto;
    padding: 0 20px;
    line-height: 1.5;
		&:empty{
			&::before{
				// content: "使用Enter发送消息，使用Ctrl+Enter换行";
				content: "请输入消息";
    		color: #B2B2B2;
			}
		}
	}
	.rich-editor-footer{
		padding: 5px 20px 20px 0;
		display: flex;
		justify-content: flex-end;
	}
}
</style>